<?php
/**
 * Created by PhpStorm.
 * User: Frings
 * Date: 2017/5/2
 * Time: 15:02
 */

use yii\helpers\Url;

$web = Url::base();
?>
<script type="text/javascript">
    function checkAll(chk) {
        var obj = $("#manager_roles_form");
        checkAllCheckBox(chk, obj);

        if ($(chk).is(':checked')) {
            $('input[name="role"]').each(function () {
                checked_roles.deleteObject($(this).val(), function (item, searchKey) {
                    if (item["id"] == searchKey) {
                        return true;
                    }
                    return false;
                });
                checked_roles.push({
                        id: $(this).val(),
                        name: $(this).parent().next().text()
                    }
                );
            });
        } else {
            $('input[name="role"]').each(function () {
                checked_roles.deleteObject($(this).val(), function (item, searchKey) {
                    if (item["id"] == searchKey) {
                        return true;
                    }
                    return false;
                });
            });
        }

        initSelectdRole();
    }
    var role = {};
    initRoles();



    //选中的角色
    function initRoles() {
        <?php
        $roles = [];
        foreach ($items as $key => $role) {
            if ($role['is_checked'] == 1) {
                $roles[] = $role;
            }
        }
        ?>

        role.values = <?= json_encode($roles) ?>;
    }

    var checked_roles = null;
    checked_roles = role.values.clone();
    //初始化role表格
    initRoleTable();

    function initRoleTable() {
        $("#manager_roles_form").find("table").find("tbody").empty();
        var roles = <?= json_encode($items)?>;
        var role_name = $("#name").val();
        for (var i = 0; i < roles.length; i++) {
            var value = roles[i];
            if (value.name.indexOf(role_name) >= 0) {
                var html = '';
                html += '<tr>';
                var checkStr = "";
                for (var j = 0; j < checked_roles.length; j++) {
                    if (checked_roles[j].id == value.id) {
                        checkStr = 'checked="checked"';
                        break;
                    }
                }


                html += '<td><input id="role' + value.id + '" type="checkbox" class="check-box" name="role" value="' + value.id + '" ' + checkStr + '></td>';
                html += '<td>' + value.name + '</td>';
                html += '</tr>';

                $("#manager_roles_form").find("table").find("tbody").append($(html));
            }
        }

        $('input[name="role"]').click(function () {
            checkOneCheckBox(this, 'check_all_role');
            checked_roles.deleteObject($(this).val(), function (item, searchKey) {
                if (item["id"] == searchKey) {
                    return true;
                }
                return false;
            });
            if ($(this).is(':checked')) {
                checked_roles.push({
                    id: $(this).val(),
                    name: $(this).parent().next().text()
                });
            }

            initSelectdRole();
        });

        initSelectdRole();
    }

    //初始化已经选中的角色
    function initSelectdRole() {
        $("#manager_roles_form").find('.attribute-lists').find('.checked-roles').empty();
        if (checked_roles && checked_roles.length > 0) {
            for (var i = 0; i < checked_roles.length; i++) {
                var value = checked_roles[i];
                var html = '<div id="roleSelect' + value.id + '" class="tag-item"><span>' + value.name + '</span><i role-id="' + value.id + '"></i></div>';
                var obj = $(html);
                obj.find("i").click(function () {
                    var role_id = $(this).attr("role-id");
                    checked_roles.deleteObject(role_id, function (item, searchKey) {
                        $('#check_all_role').prop("checked",false);
                        if (item["id"] == searchKey) {
                            return true;
                        }
                        return false;
                    });

                    $(this).parent().remove();
                    initRoleTable();
                });
                $("#manager_roles_form").find('.attribute-lists').find('.checked-roles').append(obj);
            }

            $("#roles_clear").show();
            $("#roles_more").show();
        } else {
            $("#roles_clear").hide();
            $("#roles_more").hide();
        }
    }

    setTimeout(function () {
        $("#role_lists").width($('#manager_roles_form').find('.panel-dialog').width());
        $("#roles_more").mouseenter(function () {
            $(this).parent().animate({height: $(this).parent().find('.tagsinput-add-container').height() + 9}, 200);
            if ($(this).parent().height() == 40 && checked_roles.length > 0) {
                $('#roles_more').show();
            } else {
                $(this).hide();
            }
        });
        $('#role_lists').mouseleave(function () {
            $(this).animate({height: 40}, 200);
            if (checked_roles.length > 0) {
                $('#roles_more').show();
            }
        });
    }, 500);

    function clearSelectedRole() {
        checked_roles.length = 0;
        $("#check_all_role").prop("checked", false);
        initRoleTable();
    }


</script>

<div class="form-horizontal modal-body" id="manager_roles_form">

    <div class="attribute-lists" id="role_lists">
        <div class="tagsinput-add-container">
                           <span class="checked-roles">

                           </span>
            <a class="attribute-list-del-all" id="roles_clear"
               onclick="clearSelectedRole()">清空</a>
        </div>
        <div id="roles_more" class="more">+更多</div>
    </div>

    <div class="panel panel-frame panel-operat panel-dialog">
        <div class="panel-body">
            <div class="panel-content">
                <input type="text" class="form-control search-box" placeholder="输入名称" id="name" name="name"
                       value="<?= isset($role_name) ? $role_name : '' ?>">
                <a type="button" class="btn btn-warning search-icon">
                    <div class="btn-icon"></div>
                    <div class="btn-text">搜索</div>
                </a>
            </div>

        </div>
    </div>

    <div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th><input type="checkbox" id="check_all_role" class="check-box" onclick="checkAll(this)"></th>
                    <th>角色名称</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <input type="hidden" id="row_count" value="<?= $row_count ?>">
            <input type="hidden" id="page_size" value="<?= $page_size ?>">
            <input type="hidden" id="current_page" value="<?= $current_page ?>">
        </div>
    </div>
</div>


